<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Swipe</title>
        <link rel="stylesheet" href="../src/Swipe.css">
        <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
        <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&amp;ak=E4805d16520de693a3fe707cdc962045"></script>
        <script src="../src/Swipe.min.js"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            #map, #map2 {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="map"></div>
            <div id="map2"></div>
        </div>
        <script>
            // 百度地图API功能
            var map = new BMapGL.Map('map', {
                enableIconClick: true,
                preserveDrawingBuffer: true,
                maxZoom: 20,
            }); // 创建Map实例
            map.enableScrollWheelZoom();

            map.centerAndZoom(new BMapGL.Point(116.404844, 39.921354), 11);

            const map2 = new BMapGL.Map('map2');
            map2.enableScrollWheelZoom();
            map2.centerAndZoom(new BMapGL.Point(116.404844, 39.921354), 11);

            map2.setMapStyleV2({
                styleJson: darkStyle
            });

            new BMapGLLib.Swipe(map, map2, document.getElementById('wrapper'));

        </script>
    </body>
</html>
